import React, { useEffect, useState } from 'react'
import { Navigate, HashRouter as Router, Routes, Route } from "react-router-dom"
import { ErrorBlock, Toast } from 'antd-mobile'
import PageRecord from './pages/record'
import PageAnalysis from './pages/analysis'
import PageCalculate from './pages/calculate'
import PageMe from './pages/me'
import BottomMenu from './components/BottomMenu'
import { PAGE } from './constants'
import { useDataLimit, useStore4SortFiveData, useStore4SevenStarData } from './store'

import './App.less'

function App() {

	const [loading, setLoading] = useState(true)
	const pageSize = useDataLimit(state => state.pageSize)
	const setSortFiveData = useStore4SortFiveData(state => state.setSortFiveData)
	const setSevenStarData = useStore4SevenStarData(state => state.setSevenStarData)

	useEffect(() => {
		initData()
	}, [])

	const initData = async () => {
		setLoading(true)
		try {
			await setSortFiveData(pageSize)
			await setSevenStarData(pageSize)
		} catch (error) {
			Toast.show({
				icon: 'fail',
				content: `数据查询失败：${error.message || error}`,
			})
		}
		setLoading(false)
	}

	return (
		<div className='App'>
			{
				loading ?
					<div className='page-loading'>
						<ErrorBlock status='busy' title="加载中" description="数据正在快马加鞭的赶来..." />
					</div>
					:
					<Router>
						<div className='page-container'>
							<Routes>
								<Route path="/" element={<Navigate to={PAGE.ME.KEY} />} />
								<Route path={PAGE.RECORD.KEY} element={<PageRecord />} />
								<Route path={PAGE.ANALYSIS.KEY} element={<PageAnalysis />} />
								<Route path={PAGE.CALCULATE.KEY} element={<PageCalculate />} />
								<Route path={PAGE.ME.KEY} element={<PageMe />} />
							</Routes>
						</div>
						<BottomMenu />
					</Router>
			}
		</div>
	)
}

export default App	